<template>
  <div>
    <Card :bordered="false">
      <tables
        ref="tables"
        editable
        searchable
        v-model="tableData"
        :columns="columns"
        @on-edit="onEdit"
        :addable="addable"
        :remoteSearch="remoteSearch"
        @handleRemoteSearch="handleRemoteSearch"
        @handleAdd="onAddUser"
        @on-delete="onDelete"/>
    </Card>
    <Page style="margin-top: 12px"
          :total="total"
          size="small"
          :page-size="pageSize"
          @on-change="handleChange"
          show-total/>
    <DeleteModal :modalVisible="modalVisible"
                 :modalLoading="modalLoading"
                 :deleteId="deleteId"
                 @handleDelete="handleDelete"
                 @handleChangeVisible="handleChangeVisible"/>

    <AddUser :handleType="handleType"
             :showModal="showModal"
             :formData="formData"
             :readonly="readonly"
             @changeVisible="changeVisible"
             @handleSubmit="handleSubmit"/>
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import DeleteModal from '_c/delete-modal'
  import AddUser from '@/view/users/component/add'
  import {usersList, addUser, deleteUser, editUser} from '@/api/user'

  export default {
    name: 'users',
    components: {
      Tables,
      DeleteModal,
      AddUser
    },
    mounted() {
      this.handleGetUserList({page: this.page, pageSize: this.pageSize})
    },
    data() {
      return {
        modalVisible: false,
        modalLoading: false,
        deleteId: 0,
        showModal: false,
        addable: true,
        handleType: '编辑用户',
        remoteSearch: true,
        formData: {},
        total: 0,
        pageSize: 10,
        page: 1,
        readonly: true,
        columns: [
          {
            title: '用户名',
            key: 'name',
            render: (h, params) => {
              return h('div', [
                  h('Avatar', {
                      props: {
                        src: params.row.avatar
                      }
                    }
                  ),
                  h('span', {
                    style: {
                      marginLeft: '4px',
                      lineHeight: '50px',
                      display: 'inline-block'
                    }
                  }, params.row.name),
                ]
              )
            }
          },
          {title: '邮箱', key: 'email'},
          {title: '创建时间', key: 'created_at', hiddenSearch: true},
          {
            title: '操作',
            key: 'handle',
            button: [
              (h, params, vm) => {
                return h('div', [
                  h('a', [
                    h('icon', {
                      props: {
                        type: 'ios-create',
                        color: '#2D8CF0',
                        size: '20',
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-edit', params.row)
                        }
                      }
                    })
                  ]),
                  h('a', [
                    h('icon', {
                      props: {
                        color: '#B14949',
                        type: 'md-trash',
                        size: '20'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-delete', params.row)
                        }
                      }
                    })
                  ])
                ])
              }
            ]
          }
        ],
        tableData: []
      }
    },
    methods: {
      onEdit: function (params) {
        this.showModal = true
        this.handleType = '编辑用户'
        this.formData = {
          id: params.user_id,
          username: params.username,
          nick_name: params.name,
          email: params.email,
        }
      },
      changeVisible: function (val) {
        this.showModal = val
      },
      onDelete: function (params) {
        this.modalVisible = true
        this.deleteId = params.user_id
      },
      handleChangeVisible: function (val) {
        this.modalVisible = val
      },
      handleDelete: function (id) {
        this.modalLoading = true
        deleteUser({id}).then(res => {
          this.$Message.success(res.message)
          setTimeout(() => {
            this.modalLoading = false
            this.modalVisible = false
            this.handleGetUserList()
          }, 2000)
        })
      },
      onAddUser: function () {
        this.handleType = '新增用户'
        this.readonly = false
        this.showModal = true
        this.formData = {}
      },
      handleGetUserList: function (param) {
        usersList(param).then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
      },
      handleSubmit: function (param) {
        let id = param.id || ''
        if (id) {
          editUser(param).then(res => {
            this.$Message.success(res.message)
            setTimeout(() => {
              this.handleGetUserList()
              this.showModal = false
            }, 2000)
          })
        } else {
          addUser(param).then(res => {
            this.$Message.success(res.message)
            setTimeout(() => {
              this.handleGetUserList()
              this.showModal = false
            }, 2000)
          })
        }
      },
      handleRemoteSearch: function (param) {
        console.log(param)
        this.handleGetUserList(param)
      },
      handleChange: function (val) {
        this.handleGetUserList({page: val, pageSize: this.pageSize})
      },
    }
  }
</script>

<style>

</style>
